<template>
  <div class="order">
    {{selectCountSum}}
    <van-swipe-cell v-for="item of car" :key="item.id">
      <van-card
        :num="item.count"
        :price="item.price"
        :desc="item.count+''"
        title="总数量"
        thumb="https://img.yzcdn.cn/vant/cat.jpeg"
      ></van-card>
      <van-stepper v-model="item.count" @change="setCount(item.count,item.id)" />
      <van-checkbox
        v-model="item.select"
        @change="carState(item.select,item.id,car)"
        ref="checkboxRef"
      >购买</van-checkbox>
      <van-button
        slot="right"
        square
        text="删除"
        type="danger"
        class="delete-button"
        @click="removeCar(item.id)"
      />
    </van-swipe-cell>
    <van-submit-bar
      :price="selectCountSum.price"
      :disabled="selectCountSum.price>0?false:true"
      button-text="提交订单"
      @submit="onSubmit(car)"
    >
      <van-checkbox v-model="checked" @change="toggleAll(car,checked)">全选</van-checkbox>
    </van-submit-bar>
    <van-button type="primary" :disabled="btnflag" @click="sendMsgs">{{sendMsg}}</van-button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "order",
  data() {
    return {
      checked: false,
      sendMsg: "发送验证码",
      btnflag: false //按钮禁用状态
    };
  },
  computed: {
    ...mapState(["car"]),
    ...mapGetters(["selectCountSum", "selectAll"])
  },
  methods: {
    setCount(count, id) {
      //改变商品的数量
      window.console.log(count);
      window.console.log(id);
      this.$store.commit("setCarCount", { count, id });
    },
    removeCar(id) {
      //删除商品
      this.$store.commit("removeCar", id);
    },
    onSubmit(car) {
      //提交订单
      let sum = [];
      car.forEach(e => {
        if (e.select) {
          sum.push(e);
        }
      });
      if (sum.length > 0) {
        const token = 123;
        if (token) {
          this.$router.push("/order/shopgoods");
        }
      } else {
        alert("请选择商品");
      }
    },
    carState(state, id) {
      //改变商品选中状态
      this.$store.commit("changeCarState", { id, state });
    },
    toggleAll(car, checked) {
      //切换所有状态
      car.forEach(e => {
        e.select = checked;
      });
    },
    sendMsgs() {
      let num = 60;
      window.console.log("发送验证码成功");
      let timeId = setInterval(() => {
        num--;
        this.btnflag = true;
        this.sendMsg = `等待${num}秒后发送验证码`;
        if (num == 0) {
          clearInterval(timeId);
          this.btnflag = false;
          this.sendMsg = "发送验证码";
          window.console.log(num);
        }
      }, 1000);
    }
  },
  created() {
    let idS = [];
    this.car.forEach(element => {
      idS.push(element.id);
    });
    // window.console.log(idS.join(",")); //商品的id
  }
};
</script>

<style lang="stylus" scoped>
.order {
  margin-bottom: 105px;
}

.van-submit-bar {
  bottom: 50px;
}

.van-checkbox {
  font-size: 14px;
}
</style>